﻿@page "/components/list"

<DocsPage>
    <DocsPageHeader Title="Lists">
        <Description>Easily customizable and scrollable lists. Make them suit your needs with avatars, icons, or something like checkboxes.</Description>
        </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Simple List">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ListSimpleExample">
                <ListSimpleExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Nested List">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ListNestedExample">
                <ListNestedExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Avatar List">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" Code="ListFolderExample">
                <ListFolderExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Interactive">
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="ListInteractiveExample">
                <ListInteractiveExample/>
            </SectionContent>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Selection">
                <Description>
                    If you set <CodeInline>Clickable="true"</CodeInline> and use <CodeInline>@@bind-SelectedItem</CodeInline>, MudList will manage an exclusive single-selection across all its nested lists for you. 
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" ShowCode="false" Code="ListSelectionExample">
                <ListSelectionExample/>
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
